<template>
	<div>
		<el-form :model="dynamicValidateForm" ref="dynamicValidateForm">
			<el-form-item label="活动状态："><el-switch v-model="dynamicValidateForm.activState"></el-switch></el-form-item>
			<el-form-item label="活动时间：" class="is-required">
				<el-date-picker
					v-model="dynamicValidateForm.activTime"
					format="yyyy-MM-dd HH:mm:ss"
					value-format="yyyy-MM-dd HH:mm:ss"
					type="datetimerange"
					range-separator="~"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
				></el-date-picker>
			</el-form-item>
			<el-form-item label="充值赠送：">
				<el-card v-for="(domain, index) in dynamicValidateForm.domains" :key="index" class="box-card" style="width: 70%;">
					<div slot="header">
						<span>规则 {{ index + 1 }}：</span>
						<el-button v-if="dynamicValidateForm.domains.length > 1" @click="deleteCard(index)" style="float: right;" type="text">删除</el-button>
					</div>
					<el-form-item label="规则类型：" class="rule-item">
						<el-radio v-model="domain.radio" label="1">单次充值满额送</el-radio>
						<p style="color: #b2b4b8;font-size: 14px;margin-left: 80px;margin-top: -10px;">储值达到设定门槛才送，不累计，可设置多个储值门槛。</p>
					</el-form-item>
					<el-form-item
						label="充值金额："
						:key="domain.key"
						:prop="'domains.' + index + '.topUpAmountInput'"
						:rules="rules.cardRule[index].topUpAmountInput"
						class="rule-item topUp"
					>
						<el-input placeholder="请输入" @change="inputChange(index)" v-model="domain.topUpAmountInput" style="width: 402px;">
							<template slot="append">
								元
							</template>
						</el-input>
					</el-form-item>
					<el-form-item label="赠送规则：" class="is-required rule-item">
						<!-- 同时使用多个domain.key，重复会报错，但key暂时用不到，不影响 -->
						<el-form-item :key="domain.key" :prop="'domains.' + index + '.cashBackType'" :rules="rules.cardRule[index].cashBackType" style="float: left;">
							<el-select @change="inputChange(index)" v-model="domain.cashBackType" placeholder="请选择">
								<el-option v-for="v in domain.options" :key="v.value" :label="v.label" :value="v.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item :key="domain.key" :prop="'domains.' + index + '.cashBackInput'" :rules="rules.cardRule[index].cashBackInput" style="float: left;">
							<el-input placeholder="请输入" @change="inputChange(index)" v-model="domain.cashBackInput" style="width: 202px;">
								<template slot="append">
									元
								</template>
							</el-input>
						</el-form-item>
					</el-form-item>
				</el-card>
				<p @click="addDomain" v-if="dynamicValidateForm.domains.length < 10" class="addRuleBtn">+ 增加规则</p>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import { getBalanceConfigAndActivity } from '@/api/storedCenter';
export default {
	watch: {
		dynamicValidateForm: {
			handler(newVal) {
				this.$emit('dynamicValidateForm', newVal);
			},
			deep: true
		}
	},
	data() {
		return {
			dynamicValidateForm: {
				activState: false,
				activTime: '',
				domains: [
					{
						key: Date.now(),
						radio: '1',
						topUpAmountInput: '',
						options: [
							{
								value: '1',
								label: '固定金额'
							}
						],
						cashBackType: '1',
						cashBackInput: ''
					}
				]
			},
			rules: {
				cardRule: [
					{
						topUpAmountInput: [
							{
								required: true,
								validator: (rules, value, callback) => {
									this.inputValidaFun(value, callback, 'topUpAmountInput');
								},
								trigger: 'blur'
							}
						],
						cashBackType: [
							{
								required: true,
								message: '请至少选择一个返现类型',
								trigger: 'change'
							}
						],
						cashBackInput: [
							{
								required: true,
								validator: (rules, value, callback) => {
									this.inputValidaFun(value, callback, 'cashBackInput');
								},
								trigger: 'blur'
							}
						]
					}
				]
			}
		};
	},
	mounted() {
		this.getBalanceConfigAndActivityFun();
	},
	methods: {
		// 输入校验
		inputValidaFun(value, callback, inputName) {
			if (!value) {
				return callback(new Error('输入不可以为空'));
			}
			setTimeout(() => {
				if (value < 0.01 || value > 9999.99) {
					callback(new Error('请输入充值金额，限0.01~9999.99'));
				} else {
					callback();
				}
			}, 100);

			if (value.length == 1 && value[0] == '.') {
				value = '0.'; // 首位 . 补0
			} else if (value.length > 1 && value[0] == 0 && value[1] != '.') {
				value = value.slice(1); // 删除首位0
			}

			value = value.match(/^\d*(\.?\d{0,2})/g)[0] || null; // 限制一个小数点，两位小数
			if (inputName === 'topUpAmountInput') {
				this.dynamicValidateForm.domains[this.cardRuleIndex].topUpAmountInput = value;
			} else if (inputName === 'cashBackInput') {
				this.dynamicValidateForm.domains[this.cardRuleIndex].cashBackInput = value;
			}
		},

		// 增加规则
		addDomain() {
			console.log('this.dynamicValidateForm.domains---',this.dynamicValidateForm.domains.length)
			if(this.dynamicValidateForm.domains.length === 10) return
			let dom = {
				key: Date.now(),
				radio: '1',
				topUpAmountInput: '',
				options: [
					{
						value: '1',
						label: '固定金额'
					}
				],
				cashBackType: '1',
				cashBackInput: ''
			};
			this.dynamicValidateForm.domains.push(dom);
			this.rules.cardRule.push(this.rules.cardRule[0]);
		},
		// 删除规则
		deleteCard(index) {
			if (this.dynamicValidateForm.domains.length === 1) return;
			this.dynamicValidateForm.domains.splice(index, 1);
			this.rules.cardRule.splice(index, 1);
		},
		//规则检验索引
		inputChange(index) {
			this.cardRuleIndex = index;
		},
		// 获取配置
		getBalanceConfigAndActivityFun() {
			getBalanceConfigAndActivity().then(res => {
				let ruleArr = [];
				let pubBalanceActivityConfig = res.data.pubBalanceActivityConfig;
				if (pubBalanceActivityConfig.pubRechargeAwards && pubBalanceActivityConfig.pubRechargeAwards.length > 0) {
					pubBalanceActivityConfig.pubRechargeAwards.forEach(el => {
						let obj = {
							key: Date.now(),
							id: el.id,
							radio: String(el.ruleType),
							topUpAmountInput: el.baseAmount / 100,
							options: [
								{
									value: '1',
									label: '固定金额'
								}
							],
							cashBackType: String(el.giftType),
							cashBackInput: el.giftBalance / 100
						};
						ruleArr.push(obj);
						this.rules.cardRule.push(this.rules.cardRule[0]);
					});
					let dynamicValidateForm = {
						id: res.data.id,
						activState: pubBalanceActivityConfig.status,
						activTime: [pubBalanceActivityConfig.activityStartTime, pubBalanceActivityConfig.activityEndTime],
						domains: ruleArr
					};
					this.dynamicValidateForm = dynamicValidateForm;
				}
			});
		}
	}
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
/deep/ .box-card {
	margin-left: 91px;
	margin-bottom: 10px;

	.rule-item {
		margin-bottom: 40px;
	}

	.topUp .el-form-item__error {
		left: 92px;
	}

	:nth-of-type(1) {
		margin-left: 0;
	}
}

.addRuleBtn {
	color: $primary;
	cursor: pointer;
	margin-left: 91px;
}
</style>
